<template>
  <q-list dense class="list-container">
    <q-expansion-item
      v-for="menu in menuList"
      :key="menu.id"
      clickable
      expand-separator
      :label="menu.label"
    />
  </q-list>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref, toRefs, PropType } from 'vue';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';
import { CMenuItemVO, getMenuTree } from 'src/hook/layout/getMenuTree';

export default defineComponent({
  name: 'ToolBox',
  props: {
    menuList: {
      type: Array as PropType<string[]>,
      required: true
    }
  },
  setup (props, context) {
    //数据解构
    const {
      menuList
    } = toRefs(props);

    const {
      findCatalogLabel
    } = useCatalogTool();

    const {
      convertToMenuTreeItem
    } = getMenuTree();

    //系统相关
    const {
      graphTypeList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    // 拖拽
    const onDragStart = (event: DragEvent, item: CMenuItemVO) => {
      if (event.dataTransfer) {
        let map = convertToMenuTreeItem(item.sid);
        if (map !== null) {
          console.log(item.sid);
          event.dataTransfer.setData('component-create', map.sonId.toString());
        }
      }
    }

    //挂载组件
    onMounted(() => {
      getUivCatalog(uivCatalogType.GRAPH_TYPE_CODE);
    })

    //卸载组件
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.GRAPH_TYPE_CODE);
    })

    return {
      menuList,
      graphTypeList,
      findCatalogLabel,
      onDragStart
    };
  }
});

</script>

<style lang="scss" scoped >
.list-container {
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;

  .menu-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    background-color: #d9e9ec;

    .menu-item {
      width: 60px;
      padding: 3px;
      color: #444343;
      font-size: 10px;
      border: transparent solid 1px;
      &.base {
        width: 64px;
      }

      .menu-item-icon {
        text-align: center;
      }

      .menu-item-text {
        margin-top: 5px;
        text-align: center;
      }
    }

    .menu-item:hover {
      border: #ccc solid 1px;
      background: #00aefe;   //#ccc;
      color: #fdf8f8;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
